Introduction

Now that you’ve finished wireframing your project, you’re ready to start designing interactive components in Figma.

In this exercise, you’ll do this with the help of Figma’s auto layout feature, which can be added to frames to create dynamic components that respond to the size of their child objects. For example, a button that grows with the length of its label.

Scenario

The Little Lemon food ordering app should make extensive use of buttons, and other interactive components, to allow users to perform tasks such as selecting a menu item to be viewed in more detail or confirming an order. In this exercise, you will use auto layout to create an interactive component button that you can reuse as needed.

Instructions

Step 1: Create a basic button with auto layout

Open a new Figma file and select the Text tool to create a text layer and type Button for the label.

With the layer selected, use the keyboard shortcut Shift + A to add an auto layout. This places the label into an auto-layout frame, as demonstrated in the image below:

Next, add a fill color to the layer. The example below uses the color with a hexadecimal value of #F4CE14 , which is used in Little Lemon branding.

You now have a functioning auto layout frame that can be a foundation for a button. Notice that when you change the label, the button will dynamically resize to fit.

Next, round the corners by changing the corner radius to 8.

Note: The maximum value for a corner radius is 50% of the element's height.

Step 2: Create a component

Select the frame and text and click on Create component to convert the layer into a component.

Step 3: Create component variants

Variants let you group different visual versions of your components into one container. They are component combinations that you can group as a single component set. Variants are added to improve design reality through natural gestures. You can add variants to a component after you have created it.

Consider two scenarios when designing a mobile device button: untouched and clicked . Use the untouched button as the default button by doing the following:

• Add a variant on the right-side menu when you have clicked the component

• Click the plus icon and name your variants

• Style the variant by changing the color of the fill and or the text

Step 4: Create an interactive component

For the button component, click on the Prototype tab. From here, select the top button, then click and drag the plus icon to the bottom button. Select the On click option within the Interaction details panel, which will set clicking as the action that triggers the specified change. Change the animation to Smart animate and set the animation time to 600ms, then do the same with the bottom button.

Step 5: Apply the component

To use a component after creating it, create a new frame and then drag the component in the Local components section on the Assets page to the frame.

Step 6: View the interactive component

Click on the Present mode on the top right (indicated by an icon of a rightward-pointing arrow) and test your button. When you click on it, it should change from the design of the untouched variant to that of the clicked variant. If it does not do so, please review the prior steps.

Conclusion

In this exercise, you practiced creating a responsive and interactive button component that is triggered by clicking. This component can also be reused as the base of other interactive components which may appear in your app.